<template>
  <div class="ruleItem">
    <div
      class="line"
      :class="{
        first_line: parent && allList.length > 1 && index === 0,
        last_line: parent && allList.length > 1 && index === allList.length - 1,
      }"
    >
      <el-checkbox
        v-if="!parent"
        class="ruleCheck"
        v-model="config.checked"
        @change="ruleCheckChange"
      >
      </el-checkbox>
      <div class="mb_10">
        <div class="rule-row">
          <!--          左值-->
          <el-select
            class="rule__union rule__union_left"
            v-model="config.leftVariable.value"
            filterable
            style="width: 100%"
            @change="changeConfigValue"
          >
            <el-option
              v-for="(item, index) in modelVariableList"
              :key="index"
              :value="item.code"
              :label="`${item.name}(${item.code})`"
            />
          </el-select>
          <!--        运算符-->
          <el-select
            class="centerNav mr_10"
            v-model="config.operator"
            :disabled="!leftData"
            @change="watchConfigOperator"
          >
            <el-option
              v-for="(item, index) in operatorList"
              :key="index"
              :value="item.value"
              :label="item.name"
            />
          </el-select>
          <div v-if="isShowColumn" class="wfc-union__new rule__union">
            <union-select
              ref="unionSelect"
              union-type="right"
              :model-code="modelCode"
              :config="config.rightVariable"
              :modelVariableList="modelVariableList"
              :has-left-type="config.leftVariable.type"
              :left-variable="config.leftVariable.value"
              :custom-type="config.leftVariable.type"
              :is-disabled="isDisabled"
              :is-show-form="isShowForm"
              :op-type="config.operator"
            ></union-select>
          </div>
          <div v-show="!isShowColumn" class="wfc-union__new rule__union"></div>
        </div>
        <i
          class="
            el-icon-delete
            app-flowdelete
            wfc-pro-app-flow
            delete-icon-blue
          "
          @click="deleteRuleHandle"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
import unionSelect from "./unionSelect";

export default {
  name: "RuleItem",
  components: {
    unionSelect,
  },
  props: {
    modelCode: {},
    modelVariableList: {},
    config: {},
    allList: {
      type: Array,
      default: () => [],
    },
    index: {},
    parent: {},
    panel: {},
    isShowForm: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    // 'config.operator': {
    //   handler: 'watchConfigOperator',
    //   deep: true
    // }
  },
  data() {
    return {
      showPanelTip: true,
      leftData: "",
    };
  },
  computed: {
    operatorList() {
      const { value, type, name } = this.config.leftVariable;
      const params = {
        //  短文本 长文本
        "SHORT_TEXT,LONG_TEXT, PICTURE,ATTACHMENT": [
          {
            name: "=",
            value: "eq",
          },
          {
            name: "≠",
            value: "ne",
          },
          {
            name: "包含",
            value: "contains",
          },
          {
            name: "不包含",
            value: "notContains",
          },
        ],
        // 数值 整型
        "NUMBER,INTEGER": [
          {
            name: "=",
            value: "eq",
          },
          {
            name: "≠",
            value: "ne",
          },
          {
            name: ">",
            value: "gt",
          },
          {
            name: "≥",
            value: "ge",
          },
          {
            name: "<",
            value: "lt",
          },
          {
            name: "≤",
            value: "le",
          },
          {
            name: "属于",
            value: "between",
          },
          {
            name: "不属于",
            value: "notBetween",
          },
        ],
        // 布尔值
        BOOL: [
          {
            name: "=",
            value: "eq",
          },
          {
            name: "≠",
            value: "ne",
          },
        ],
        //  时间

        TIME: [
          {
            name: "=",
            value: "eq",
          },
          {
            name: "≠",
            value: "ne",
          },
          {
            name: ">",
            value: "gt",
          },
          {
            name: "≥",
            value: "ge",
          },
          {
            name: "<",
            value: "lt",
          },
          {
            name: "≤",
            value: "le",
          },
        ],
        // 日期
        DATE: [
          {
            name: "=",
            value: "eq",
          },
          {
            name: "≠",
            value: "ne",
          },
          {
            name: ">",
            value: "gt",
          },
          {
            name: "≥",
            value: "ge",
          },
          {
            name: "<",
            value: "lt",
          },
          {
            name: "≤",
            value: "le",
          },
        ],

        // 人员 部门
        STAFF: [
          {
            name: "=",
            value: "eq",
          },
          {
            name: "≠",
            value: "ne",
          },
        ],
        DEPARTMENT: [
          {
            name: "=",
            value: "eq",
          },
          {
            name: "≠",
            value: "ne",
          },
        ],
        // 序列号
        SEQ: [],
        "RELATION_SELECT,RELATION_REFERENCE,ATTACHMENT,SUB_TABLE,RELATION_PRIMARY_KEY":
          [],
      };
      const newKey = Object.keys(params).find((str) => ~str.indexOf(type));
      if (!newKey) {
        return;
      }
      const result = params[newKey];
      if (type !== "SEQ") {
        result.push(
          {
            name: "为空",
            value: "isNull",
          },
          {
            name: "不为空",
            value: "isNotNull",
          }
        );
      } else {
        result.push({
          name: "不为空",
          value: "isNotNull",
        });
      }
      return result;
    },
    isShowColumn() {
      const flagParams = ["isNull", "isNotNull"];
      return !flagParams.includes(this.config.operator);
    },
    // 是否禁用左侧union-select
    isDisabled() {
      return !(this.leftData && this.config.operator);
    },
  },
  mounted() {
    this.leftData = this.config.leftVariable.value;
  },

  methods: {
    init() {},
    watchConfigOperator(val) {
      if (val === "isNull" || val === "isNotNull") {
        this.config.rightVariable = {};
      } else {
        if (this.config.rightVariable) {
          this.config.rightVariable.type = "FIX";
          this.$set(this.config.rightVariable, "value", []);
        }
      }
    },
    clearRright() {
      this.config.rightVariable.value = [""];
    },
    // 切换左边select
    changeConfigValue(config) {
      const target = this.modelVariableList.find(
        (item) => item.code === config
      );
      this.config.leftVariable.value = target.code;
      this.config.leftVariable.type = target.type;
      this.leftData = config;
      this.config.operator = "";
      // const type = this.config.leftVariable.type
      this.$nextTick(() => {
        this.$set(this.config, "rightVariable", {
          type: "FIX",
          value: "",
          display_bos: [],
        });
      });
    },
    handleCommandChangeRightType(command) {
      this.config.rightVariable.type = command;
    },
    ruleCheckChange(val) {
      this.$emit("ruleCheckChange", this.config);
    },
    handleEdit() {
      // this.Bus.$emit('handleEdit', this.config)
    },
    deleteRuleHandle() {
      const data = {
        allList: this.allList,
        index: this.index,
        parent: this.parent,
      };
      this.$emit("deleteRuleHander", data);
    },
  },
};
</script>

<style scoped>
.ruleItem {
  position: relative;
  margin-left: 15px;
  margin-bottom: 10px;
}

.ruleItem .ruleCheck {
  position: absolute;
  top: 50%;
  left: -48px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ruleItem .app-flowdelete {
  cursor: pointer;
}

.group {
  position: relative;
  margin-left: 10px;
}

.group.hasCompile {
  border-left: 1px dashed #ccc;
}

div.group.noCompile .ruleCheck {
  left: -25px;
}

.line {
  position: relative;
  padding-left: 0;
}

.mb_10 {
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mb_10 .expression-input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-right: 10px;
}

.mb_10 .rule-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mb_10 .rule-row .rule__union,
.mb_10 .rule-row {
  flex: 1;
}

.mb_10 .rule-row .rule__union_left {
  margin-right: 10px;
}

.mr_10 {
  margin-right: 5px;
}

.expression-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.expression-row .expression__input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-right: 10px;
}

.centerNav {
  width: 130px;
}

.wfc-union__new {
  display: inline-block;
  margin-right: 10px;
}

.wfc-union__new .el-select .el-input__inner {
  padding-right: 28px;
}

.wfc-union__new .range-picker-date {
  width: 145px;
  vertical-align: top;
}

.wfc-union__new .range-picker-date .el-date-editor .el-range-input,
.wfc-union__new .range-picker-date .el-date-editor .el-range-separator {
  font-size: 12px;
}

.wfc-union__new .wfc-union__new-form {
  display: inline-block;
  width: 100%;
}

.wfc-union__new .wfc-union__box {
  width: 100%;
}

.wfc-union__new .wfc-union__box ::v-deep .el-input__icon {
  margin-right: 4px;
}

.wfc-union__new .width-full {
  width: 100%;
}

.wfc-union__new .select__width {
  width: calc(100% - 32px);
  vertical-align: top;
}

.wfc-union__new .select__width.el-select .el-input .el-input__inner {
  vertical-align: top;
}

.wfc-union__new .select__width input {
  vertical-align: top;
  font-family: Helvetica, Arial, sans-serif;
  padding: 0 12px;
}

.wfc-union__new .user__search {
  display: inline-block;
}

.wfc-union__new .el-date-editor--daterange.el-input__inner,
.wfc-union__new .el-date-editor.el-input {
  width: calc(100% - 32px);
}

.wfc-union__new .el-date-editor .el-input--suffix .el-input__inner {
  padding-right: 0;
}

.wfc-union__new .el-date-editor .el-range-separator {
  width: 14%;
  padding: 0;
}

.wfc-union__new .el-date-editor .el-range-input {
  width: 37.5%;
}

.wfc-union__new .el-date-editor .el-range__close-icon {
  display: none;
}

.wfc-union__new .select__width_half_left {
  width: calc(50% - 16px);
}

.wfc-union__new .select__width_half_left > .el-input__inner {
  padding-left: 38px;
  padding-right: 2px;
  border-radius: 0;
}

.wfc-union__new .select__width_half_left .el-input__prefix {
  left: 1px !important;
  right: inherit;
}

.wfc-union__new
  .select__width_half_left
  .el-input__prefix
  .el-select
  .el-input__inner {
  width: 36px;
  height: 30px;
  line-height: 30px;
  border: 0;
  padding-left: 5px;
  padding-right: 5px;
}

.wfc-union__new
  .select__width_half_left
  .el-input__prefix
  .el-select
  .el-input__inner:focus,
.wfc-union__new
  .select__width_half_left
  .el-input__prefix
  .el-select
  .el-input__inner:hover {
  height: 32px;
  line-height: 32px;
  border: 1px solid #3c8cff;
}

.wfc-union__new
  .select__width_half_left
  .el-input__prefix
  .el-select
  .el-input__suffix {
  right: 0;
}

.wfc-union__new .select__width_half_right {
  width: calc(50% - 16px);
}

.wfc-union__new .select__width_half_right > .el-input__inner {
  padding-left: 5px;
  padding-right: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid transparent;
}

.wfc-union__new .select__width_half_right > .el-input__inner:focus,
.wfc-union__new .select__width_half_right > .el-input__inner:hover {
  border-left: 1px solid #3c8cff;
}

.wfc-union__new .select__width_half_right .el-input__suffix {
  right: 1px;
}

.wfc-union__new
  .select__width_half_right
  .el-input__suffix
  .el-select
  .el-input__inner {
  width: 36px;
  height: 30px;
  line-height: 30px;
  border: 0;
  padding-left: 5px;
  padding-right: 5px;
}

.wfc-union__new
  .select__width_half_right
  .el-input__suffix
  .el-select
  .el-input__inner:focus,
.wfc-union__new
  .select__width_half_right
  .el-input__suffix
  .el-select
  .el-input__inner:hover {
  height: 32px;
  line-height: 32px;
  border: 1px solid #3c8cff;
}

.wfc-union__new .el-dropdown {
  height: 32px;
}

.wfc-union__new .wfc-union-dropdown {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 30px;
  background: #f7f8fc;
  border: 1px solid #dee0e3;
  border-right: 0;
  text-align: center;
  outline: 0;
  vertical-align: top;
  border-radius: 2px 0 0 2px;
}

.wfc-union__new .activate {
  color: #3c8cff;
}

.wfc-union__new .disabled-input {
  height: 32px;
}

.wfc-union__new .wfc-union__new--select .el-input.el-input--suffix input {
  padding-left: 8px !important;
  color: #3c8cff !important;
  background-color: #f6f6f6;
  padding-right: 9px !important;
  border-right: 0;
  border-radius: 0 !important;
  font-family: PingFangSC !important;
  width: 32px;
}

.wfc-union__new .wfc-union__new--select .el-input__inner {
  border-color: #ccc !important;
}

.wfc-union__new .el-input-group__prepend {
  padding: 0 16px;
}

.wfc-union__new .type-select .el-input__suffix {
  display: none !important;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 12px;
  min-height: 48px;
  cursor: pointer;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-checkedStatusXRZJrules {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-top: -9px;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit:hover {
  background-color: #f5f7fa;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-headPortraitXRZJrules {
  min-width: 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-rightXRZJrules {
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  padding: 7px 40px 7px 12px !important;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-bottomXRZJrules {
  min-height: 14px;
  line-height: 14px;
  font-size: 12px;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-nameXRZJrules {
  font-size: 14px;
  line-height: 14px;
  margin-right: 8px;
  word-wrap: break-word;
  word-break: break-word;
}

.wfc-union__new .wfc-optionStyleXRZJrules_edit .wfc-emailXRZJrules {
  line-height: 12px;
  font-size: 12px;
  word-wrap: break-word;
  word-break: break-word;
}

.el-dropdown-selfdefine {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: #f7f8fc;
  border: 1px solid #dee0e3;
  border-right: 0;
  text-align: center;
  outline: 0;
  border-radius: 2px 0 0 2px;
  color: #3c8cff;
  /*vertical-align: middle;*/
}

.line.first_line:before,
.line.last_line:before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 12px;
  height: 1px;
  background-color: #ccc;
  z-index: 100;
}

.reset_line .line.first_line:before,
.reset_line .line.last_line:before {
  left: -31px;
}

.delete-icon-blue {
  color: #3c8cff;
  cursor: pointer;
  line-height: 32px;
}

.wfc-pro-app-flow {
  font-size: 16px;
  font-style: normal;
}

.reset_pd .last_line {
  padding-left: 15px;
}
</style>
